<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<title></title>
    <meta name="keywords" content="">
    <link rel="stylesheet" href="../plugin/styles/iview.css" />
    <link rel="stylesheet" href="../css/displaySet.css">
    <link rel="stylesheet" href="../css/common.css">
    <style>
      html, body {
        width: 100%;
        height: 100%;
        background: url(../img/background.png) no-repeat;
        background-size: cover;
        position: absolute;
      }
      .container{
        height: 100%;
        /* background: url(../img/background.png) no-repeat; */
        background-size: 100% 100%;
        margin-top: 50px;
      }
      .ivu-notice {
        top: 100px !important;
      }
    </style>
  </head>
  <body>
    <div id="displayId">
      <div class="container">
        <div class="content-head">     
          <div>
            <img src="../img/contentHeadBg.png" class="content-head-bg">
          </div>
          <img src="../img/clickDisplaySet.png" class="click-display-set">
        </div>
        <div class="content-foot">
          <i-form ref="formItem" :model="formItem" :rules="ruleValidate" enctype="multipart/form-data" >
            <form-item>
              <div class="display-set-title">系统皮肤</div>
              <div class="system-skin">
                <div class="system-skin-block" style="text-align: center;padding: 50px"><span>正在建设中，敬请期待！</span></div>
                <div class="system-skin-block" style="text-align: center;padding: 50px;"><span>正在建设中，敬请期待！</span></div>
                <div class="system-skin-block" style="text-align: center;padding: 50px;"><span>正在建设中，敬请期待！</span></div>
                <div class="system-skin-block" style="text-align: center;padding: 50px;"><span>正在建设中，敬请期待！</span></div>
              </div>
            </form-item>
            <form-item prop="title">
              <div class="display-set-title">自定义标题</div>
              <i-input v-model="formItem.title" placeholder="请输入需要更改的标题，限15个字" class="input-title input-title-bg"></i-input>
            </form-item>
            <form-item>
              <div class="display-set-title">自定义LOGO</div>
              <Upload :before-upload="beforeUploadLogo">
                <i-button type="ghost">上传附件</i-button>
              </Upload>
              <div v-if="fileLogoUrl!==null">上传图片名称：{{fileLogoUrl.name}}</div>
              <!-- <div v-if="fileLogoUrl!== null">上传图片名称：{{fileLogoUrl.name}}</div> -->
              <!-- <div v-if="fileLogo!== null">上传图片路径 : {{fileLogo}}</div> -->
            </form-item>
            <form-item>
              <div class="display-set-title">自定义ICON</div>
              <Upload :before-upload="beforeUploadIcon">
                <i-button type="ghost" class="input-title">上传附件</i-button>
              </Upload>
              <div v-if="fileIconUrl!== null">上传图片名称： {{fileIconUrl.name}}</div>
              <!-- <div v-if="fileIcon!== null">上传图片路径 : {{fileIcon}}</div> -->
            </form-item>
          </i-form>
        </div>
        <footer>
          <div class="footer-btn">
            <div style="cursor: pointer;" class="save" @click="saveBtn()">
              <span class="icon_save">保存设置</span> 
            </div>
            <div style="cursor: pointer;" class="restore" @click="resetBtn(formItem)">
              <span class="icon_restore">恢复默认</span>
            </div>
          </div>
        </footer>
      </div>
    </div>
    <script src="../js/vue.min.js"></script>
	  <script src="../plugin/iview.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../js/displaySet/page.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../../../js/mock.js"></script>
    <script src="../../../js/api.js"></script>
  
    <script>
      new Vue({
        el: '#displayId',
        mounted(){
          this.currentSetData()
        },
        data() {
          var validateuser = function(rule, value, callback){
            if (value.length > 15) {
              return callback(new Error('最多只能输入15个字'));
            } else if(!value){
              return callback(new Error('请输入自定义标题'));
            } else {
              callback();
            }
          };
          return{
            fileLogoUrl: null,
            fileIconUrl: null,
            fileLogo:null,
            fileIcon:null,
            loading:false,
            formItem:{
              title:''
            },
            ruleValidate:{
              title: [
                {validator: validateuser,trigger: 'blur'}
              ],
            }    
          }     
          
        },
        methods:{
          // 查询当前的设置
          currentSetData(){
            const parmas={}
            axios.get(GET_currentInfo, parmas).then(resp => {
              if (resp.data.code === 200) {   
                this.defaultDataList = resp.data.data
                this.formItem.title = this.defaultDataList.title
                this.fileLogo = this.defaultDataList.logo
                this.fileIcon = this.defaultDataList.icon
              }else{
                this.$Notice.error({
                  title: resp.data.msg,
                  top:50
                })
              }
            })
          },
          // 默认显示列表数据
          defaultData(){
            const parmas={}
            axios.get(GET_defaultInfo, parmas).then(resp => {
              if (resp.data.code === 200) {  
                this.defaultDataList = resp.data.data
                this.formItem.title = this.defaultDataList.title
                this.fileLogo = this.defaultDataList.logo
                this.fileIcon = this.defaultDataList.icon
              }else{
                this.$Notice.error({
                  title: resp.data.msg,
                  top:50

                })
              }
            })
          },
          goAccountRoleManage(){
            window.location = 'accountRoleManage.html'
            // window.open('accountRoleManage.html','_self')
          },
          // 阻止自动上传Logo
          beforeUploadLogo(file){
            this.fileLogoUrl = file;
            return false; 
          },
          // 阻止自动上传Icon
          beforeUploadIcon(file){
            this.fileIconUrl = file;
            return false; 
          },
          // 保存按钮
          saveBtn(){
            this.$refs.formItem.validate((valid) => {
              if (valid) {
                this.saveInfo()
              } else {
                this.$Message.error('保存失败!');
              }
            }) 
          },
        // 保存提交接口
         saveInfo(){
          //  权限数据
          var adminObj=JSON.parse(sessionStorage.loginData); 
          if(adminObj.是否超级管理员===0){
            let urlSearchParams = new FormData();
            urlSearchParams.append('icon',this.fileIconUrl||'');
            urlSearchParams.append('logo',this.fileLogoUrl||'');
            urlSearchParams.append('title',this.formItem.title);
            console.info('222',this.fileLogoUrl)
            axios.post(POST_saveInfo, urlSearchParams,{
              headers:{'Content-Type':'multipart/form-data'}
            }).then(resp => {
              if (resp.data.code === 200) {   
                this.uploadImg = resp.data.data
                this.fileLogo = this.uploadImg.logo
                this.fileIcon = this.uploadImg.icon
                this.$Message.success({
                  content: '保存成功',
                  duration: 2,
                  // closable: false
                });
              }else{
                this.$Notice.error({
                  title: resp.data.msg,
                  top:50
                })
              }
            })  
          }else{
            this.$Notice.error({
              title: '你没有权限',
              top: 50,
              duration: 2
            })
          }
         },
        // 重置按钮
          resetBtn(formItem){
            this.fileIconUrl=null
            this.fileLogoUrl=null
            var adminObj=JSON.parse(sessionStorage.loginData);
            if(adminObj.是否超级管理员===0){
              this.defaultData()
            } else {
                this.$Notice.error({
                title: '你没有权限',
                top: 50,
                duration: 2
              })
            }
          }
        }
      })
    </script>
  </body>
</html>